<route>
{
meta: {
title: '管理员账号信息'
}
}
</route>

<template>

  <div style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="16">
        <el-form :model="queryParams"
                 ref="queryFormRef"
                 :inline="true"
                 label-width="68px">
          <el-form-item label="用户名"
                        prop="account">
            <el-input v-model="queryParams.account"
                      placeholder="请输入用户名"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号"
                        prop="phone_number">
            <el-input v-model="queryParams.phone_number"
                      placeholder="请输入用户手机号"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       @click="handleQuery"
                       round
                       plain>搜索
            </el-button>
            <el-button :icon="Refresh"
                       @click="resetQuery"
                       round
                       plain>重置
            </el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   :icon="Plus"
                   @click="handleAdd">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-upload action="http://localhost:8888/user/upload"
                   :on-success="handleImportSuccess"
                   :on-error="handleImportError"
                   :headers="myHeaders">
          <el-button type="success"
                     plain
                     :icon="Upload">导入
          </el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   :icon="Download"
                   @click="expExcel">导出
        </el-button>
      </el-col>
    </el-row>
    <!--        表单-->
    <el-table :data="userList">
      <el-table-column fixed=""
                       type="index"
                       label="序号"
                       :index="pageNum" />

      <el-table-column label="用户名"
                       prop="account" />

      <el-table-column prop="phone_number"
                       label="手机号" />
      <el-table-column prop="permissions"
                       label="用户权限" />
      <el-table-column prop="use_flag"
                       label="使用标志">
        <template #default="scope">

          <el-switch v-model="scope.row.use_flag"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     :active-value="0"
                     :inactive-value="1"
                     @change="updateLabFlag(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column fixed="right"
                       label="操作"
                       width="200px">
        <template #default="scope">
          <el-button type="success"
                     plain
                     size="small"
                     @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button size="small"
                     plain
                     type="danger"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
            v-show="page.total > 0"
            :total="page.total"
            v-model:page="page.pageNum"
            v-model:limit="page.pageSize"
            @pagination="getList"
        />

    <div>
      <!-- 添加或修改角色配置对话框 -->
      <el-dialog :title="title"
                 v-model="operForm.open"
                 width="500px"
                 append-to-body>
        <el-form :model="operForm.form"
                 ref="queryFormRef"
                 label-width="100px">
          <el-form-item label="用户名称"
                        prop="account">
            <el-input v-model="operForm.form.account"
                      placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="手机号"
                        prop="phone_number">
            <el-input v-model="operForm.form.phone_number"
                      placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="密码"
                        prop="password">
            <el-input v-model="operForm.form.password"
                      placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="用户权限"
                        prop="permissions">
            <el-input v-model="operForm.form.permissions"
                      placeholder="请选择角色权限" />
          </el-form-item>

        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary"
                       @click="submitForm">确 定
            </el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Download,
  Refresh,
  Plus,
  User,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { request } from '../../api/index'

const userList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)

/**
 * 分页
 */
// const handleSizeChange = (pagesize) => {
//     console.log('每页几条数据' + pagesize)
//     page.value.pagesize = pagesize
//     getList()
// }
// const handleCurrentChange = (currentpage) => {
//     console.log('当前第几页' + currentpage)
//     page.value.currentpage = currentpage
//     getList()
// }
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
})

//-----------------------------

/**
 * excel 导入
 */
const handleImportSuccess = () => {
  ElMessage.success('导入成功')
  getList()
}
const handleImportError = () => {
  ElMessage.error('导入失败')
  getList()
}
//在请求头上携带token
const myHeaders = ref({
  Authorization: localStorage.getItem('token'),
})

/**
 * excel 导出
 */
const expExcel = () => {
  request(
    'get',
    `user/downloadFailedUsingJson`,
    'application/json; charset=UTF-8',
    'blob'
  ).then((res) => {
    let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
    let url = URL.createObjectURL(blob)
    const link = document.createElement('a') //创建a标签
    link.href = url
    link.download = '导出学生信息.xlsx' //重命名文件
    link.click()
    URL.revokeObjectURL(url)
    console.log('下载文件' + res)
  })
}
/**模糊查询条件 */
const queryParams = ref({
  pageNum: page.value.currentpage,
  pageSize: page.value.pagesize,
  phone_number: undefined,
  account: undefined,
  user_type: 0,
})
/**获取表单数据*/
// const getList = () => {
//     loading.value = true
//     console.log(queryParams.value)
//     api.post('user/selectUser', queryParams.value).then((res) => {
//         loading.value = false
//         userList.value = res.data
//         console.log('tableData=', userList.value)
//     })
// }

/*const getList = () => {
    loading.value = true
    console.log(queryParams.value)
    api
        .post(
            'user/selectAllPage?pageNum=' +
            page.value.currentpage +
            '&pageSize=' +
            page.value.pagesize
        )
        .then((res) => {
            page.value.total = res.data.total
            loading.value = false
            userList.value = res.data.list
            console.log('tableData=', userList.value)
            console.log(res)
        })
}*/

const getList = () => {
  loading.value = true
  console.log(queryParams.value)
  api.post('user/selectAllPage', queryParams.value).then((res) => {
    page.value.total = res.data.total
    page.value.pagesize = res.data.pageSize
    loading.value = false
    userList.value = res.data.list
    console.log('tableData=', userList.value)
    console.log(res)
  })
}
/**删除按钮操作*/
const handleDelete = (row) => {
  const id = row.id
  console.log(id)
  const username = row.account
  ElMessageBox.confirm(
    '是否确认删除用户编号为"' + username + '"的数据项?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(function () {
      return api.post('user/deleteUser', { id }).then((res) => {})
    })
    .then(() => {
      getList()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

/** 搜索按钮操作 */
function handleQuery() {
  pageNum.value = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/**增加或修改表单数据 */
const operForm = ref({
  open: false,
  form: {
    id: undefined,
    account: undefined,
    password: undefined,
    phone_number: undefined,
    permissions: undefined,
    use_flag: undefined,
    user_type: undefined,
  },
})

/** 重置新增的表单以及其他数据  */
function reset() {
  operForm.value.form = {
    id: undefined,
    account: undefined,
    password: undefined,
    phone_number: undefined,
    permissions: undefined,
    use_flag: 0,
    user_type: 0,
  }
  //重置搜索框
  queryFormRef.value.resetFields()
}

/**
 * 新增
 */
const handleAdd = () => {
  reset()
  operForm.value.open = true
  title.value = '添加角色'
}

/**编辑按钮操作 */
const handleEdit = (row) => {
  reset()
  const id = row.id
  console.log(id)
  api.post('user/selectById', { id }).then((res) => {
    operForm.value.form = res.data
    operForm.value.open = true
    console.log('tableData=', operForm.value.form)
  })
}

/** 提交按钮 */
function submitForm() {
  console.log(operForm.value.form.id)
  if (operForm.value.form.id != undefined) {
    api.post('user/updateUser', operForm.value.form).then((res) => {
      ElMessage.info('修改成功')
      console.log('tableData=', User.value)
      operForm.value.open = false
      getList()
    })
  } else {
    api.post('user/addUser', operForm.value.form).then((res) => {
      ElMessage.info('新增成功')
      operForm.value.open = false
      getList()
    })
  }
}

/** 取消按钮 */
function cancel() {
  open.value = false
  operForm.value.open = false
}

/**修改用户是否使用标志 */
const updateLabFlag = (row) => {
  api.post('user/updateUser', row).then((res) => {})
}
getList()
</script>
